//Set global variables
var eventInformationsStore;
var eventInformationsArray;

Ext.onReady(function() {	
	var eventParameters = getEventParameters();					//Get the event parameters from the URL
	
	getEventInformations(eventParameters);						//Get the event informations from the MySQL-DB
	
	eventInformationsStore = new Ext.data.ArrayStore({
		fields: [												//Define the fields of the store
           	{name: "name"},
           	{name: "description"},
           	{name: "eventsCategory"},
           	{name: "fee"},
           	{name: "date"},
           	{name: "street"},
           	{name: "nr"},
           	{name: "plz"},
           	{name: "town"},
        	{name: "organization"},
        	{name: "email"}
        ]
	});
	
	var headerGraphic = new Ext.BoxComponent({					//Set up the header graphic
    	cls:"headerGraphic", 									//Set CSS reference name
    	autoEl: {tag: "img", src: "./img/headerGraphic.png"}		
    });
    
    var eventInformationsTpl = new Ext.XTemplate(
		    '<tpl for=".">',
		        "<div class='draw-eventInfo'>",
		        	"<table style='border-spacing: 10px;'>",
		        		"<tr>",
		        			"<td><b>Veranstaltung:</b></td>",
		        			"<td>{name}</td>",
		        		"</tr>",
		        		"<tr>",
		        			"<td><b>Beschreibung:</b></td>",
		        			"<td>{description}</td>",
		        		"</tr>",
		        		"<tr>",
		        			"<td><b>Kategorie:</b></td>",
		        			"<td>{eventsCategory}</td>",
		        		"</tr>",
		        		"<tr>",
		        			"<td><b>Eintritt:</b></td>",
		        			"<td>{fee} &euro;</td>",
		        		"</tr>",
		        		"<tr>",
		        			"<td><b>Datum/Uhrzeit:</b></td>",
		        			"<td>{date}</td>",
		        		"</tr>",
		        		"<tr>",
		        			"<td><b>Adresse:</b></td>",
		        			"<td>{street} {nr}<br/>{plz} {town}</td>",
		        		"</tr>",
		        		"<tr>",
		        			"<td><b>Organisation:</b></td>",
		        			"<td>{organization}</td>",
		        		"</tr>",
		        		"<tr>",
		        			"<td><b>E-Mail:</b></td>",
		        			"<td>{email}</td>",
		        		"</tr>",
		        	"</table>",
		        "</div>",
		    "</tpl>",
		    "<div class='x-clear'></div>"
	);
	
	var eventInformationsDataView = new Ext.DataView({
        store: eventInformationsStore,
        tpl: eventInformationsTpl,
        autoHeight:true,
        overClass:'x-view-over',
        itemSelector:'div.draw-eventInfo'
    });
    
    var eventInformationsPanel = new Ext.Panel({
    	baseCls: "eventInformationsPanel",
    	autoScroll: true,
    	region: "center",
    	items: [
    	        eventInformationsDataView
    	]
    });
    
    var graphicURL = "./img/test.jpg";
    var eventGraphic = new Ext.BoxComponent({					//Set up the header graphic
    	cls: "eventGraphic",
    	autoEl: {tag: "img", src: graphicURL}		
    });
    
    var eventGraphicPanel = new Ext.Panel({
    	region: "east",
    	baseCls: "eventGraphicPanel",
    	autoScroll: true,
    	items: [
    		{
    			layout: "fit",
    			items: [
    				eventGraphic
    			]
    		}
    	]
    });
	
	var viewport = new Ext.Viewport({							//Create the viewport
		  layout: "border",										//Choose the preexisting layout type "border"
		  items: [
				      //Header
					  {
						region: "north",									//Set the position of the map in the ExtJS border layout (reference for the viewport)
						baseCls: "headerRegion",							//Set the basic CSS reference name
						items: [headerGraphic]								//Add header graphic + login area
					  },
					  
					  //Event informations
					  eventInformationsPanel,
					  
					  //Event graphic
					  eventGraphicPanel
			  ]
	});
});

/*
 * This function extracts the GET-parameters from the URL and returns the parameters as an array
 */
function getEventParameters(){
	var eventParameters = {};									//Create the result array		
	var query = window.location.search.substring(1);			//Get window URL
	var decodedQuery = decodeURIComponent(query);				//Decode the URL
	var parameters = decodedQuery.split("&");					//Split the query according to the parameters	
	
	for (var i=0; i<parameters.length; i++) {							
	    var parameterPair = parameters[i].split("=");			//Split the parameters to separate parameters and values   
	    eventParameters[i] = parameterPair[1];					//Save the parameters to the result array
    }
    return eventParameters;        								//Return the result
}

/*
 * This function gets the event informations based on the parameters specified in the eventParameters array
 */
function getEventInformations(eventParameters){
	Ext.Ajax.request({											//Sending AJAX request
		url: "./php/phpsql_getEventInformations.php",
	  	method: "POST",          
      	params: {												//Parameters
    		name: eventParameters[0],
    		eventsCategory: eventParameters[1],
    		date: eventParameters[2],
    		street: eventParameters[3],
    		nr: eventParameters[4],
    		town: eventParameters[5] 	
      	},
	  	success: function(response){							//Success function
	  		var xml = response.responseXML;								
		  	var eventInformations = xml.documentElement.getElementsByTagName("event");			//Get events informations from XML
		  	var organization = xml.documentElement.getElementsByTagName("organization");		//Get organization from XML
		  	eventInformationsArray = new Array();
			for(var i = 0; i < eventInformations.length; i++){
				eventInformationsArray[i] = new Array();
				if(eventInformations[i].getElementsByTagName("name")[0].firstChild == null){
					var evName = "";
				}
				else{
					var evName = eventInformations[i].getElementsByTagName("name")[0].firstChild.data;
				}
				if(eventInformations[i].getElementsByTagName("description")[0].firstChild == null){
					var description = "";
				}
				else{
					var description = eventInformations[i].getElementsByTagName("description")[0].firstChild.data;
				}
				if(eventInformations[i].getElementsByTagName("eventcategory")[0].firstChild == null){
					var eventcategory = "";
				}
				else{
					var eventcategory = eventInformations[i].getElementsByTagName("eventcategory")[0].firstChild.data;
				}
		  		if(eventInformations[i].getElementsByTagName("fee")[0].firstChild == null){
					var fee = "";
				}
				else{
					var fee = eventInformations[i].getElementsByTagName("fee")[0].firstChild.data;
				}
				if(eventInformations[i].getElementsByTagName("date")[0].firstChild == null){
					var date = "";
				}
				else{
					var date = eventInformations[i].getElementsByTagName("date")[0].firstChild.data;
				}
				if(eventInformations[i].getElementsByTagName("street")[0].firstChild == null){
					var street = "";
				}
				else{
					var street = eventInformations[i].getElementsByTagName("street")[0].firstChild.data;
				}
				if(eventInformations[i].getElementsByTagName("nr")[0].firstChild == null){
					var nr = "";
				}
				else{
					var nr = eventInformations[i].getElementsByTagName("nr")[0].firstChild.data;
				}
				if(eventInformations[i].getElementsByTagName("plz")[0].firstChild == null){
					var plz = "";
				}
				else{
					var plz = eventInformations[i].getElementsByTagName("plz")[0].firstChild.data;
				}
				if(eventInformations[i].getElementsByTagName("town")[0].firstChild == null){
					var town = "";
				}
				else{
					var town = eventInformations[i].getElementsByTagName("town")[0].firstChild.data;
				}
				if(organization[i].getElementsByTagName("name")[0].firstChild == null){
					var orgName = "";
				}
				else{
					var orgName = organization[i].getElementsByTagName("name")[0].firstChild.data;
				}
				if(organization[i].getElementsByTagName("contactinformation")[0].firstChild == null){
					var contactInformation = "";
				}
				else{
					var contactInformation = organization[i].getElementsByTagName("contactinformation")[0].firstChild.data;
				}
				
				eventInformationsArray[i] = new Array();
				eventInformationsArray[i][0] = evName;
				eventInformationsArray[i][1] = description;
				eventInformationsArray[i][2] = eventcategory;
				eventInformationsArray[i][3] = fee;
				eventInformationsArray[i][4] = date;
				eventInformationsArray[i][5] = street;
				eventInformationsArray[i][6] = nr;
				eventInformationsArray[i][7] = plz;
				eventInformationsArray[i][8] = town;
				eventInformationsArray[i][9] = orgName;
				eventInformationsArray[i][10] = contactInformation;
		  	}
		  	
		  	eventInformationsStore.loadData(eventInformationsArray);							//Manually load local data
		}
	});													
	  
}
